<template>
  <div class="container">
    <div class="search-line">
      <el-form :model="searchData">
        <el-form-item label="小区名称：">
          <el-input
            v-model="searchData.name"
            placeholder="请输入小区名称"
            autocomplete="off"
          /> </el-form-item
      ></el-form>

      <div class="right-btn">
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <div class="content">
      <div class="table-title">
        <span>小区列表</span>
        <el-button :icon="Plus" type="primary" @click="toAdd">
          新增小区
        </el-button>
      </div>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="ID" label="小区ID" />
        <el-table-column prop="communityName" label="小区名称" />
        <el-table-column prop="street" label="详细地址" />
        <el-table-column prop="province" label="省份" />
        <el-table-column prop="city" label="市" />
        <el-table-column prop="area" label="区县" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-popconfirm
              title="确认删除该站点?"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="deleteRow(scope.row.ID)"
            >
              <template #reference>
                <el-button link type="primary" size="small"> 删除 </el-button>
              </template>
            </el-popconfirm>
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="editRow(scope.row)"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        class="my-pagination"
        v-model:current-page="searchData.page"
        v-model:page-size="searchData.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="slot, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <template #default>
          <span class="el-pagination__total is-first"> 共 {{ total }} 条 </span>
        </template></el-pagination
      > -->
    </div>
    <el-dialog v-model="dialogFormVisible" title="新增小区" width="500">
      <el-form :model="form" ref="formRef" :rules="rules">
        <el-form-item label="小区名称" label-width="100px" prop="communityName">
          <el-input
            v-model="form.communityName"
            placeholder="请输入小区"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="详细地址" label-width="100px" prop="street">
          <el-input
            v-model="form.street"
            placeholder="XXXX街XX号"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="省份" label-width="100px" prop="province">
          <el-input v-model="form.province" autocomplete="off" />
        </el-form-item>
        <el-form-item label="市" label-width="100px" prop="city">
          <el-input v-model="form.city" autocomplete="off" />
        </el-form-item>
        <el-form-item label="区县" label-width="100px" prop="area">
          <el-input v-model="form.area" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Plus, Lock } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import {
  getCommunityByName,
  addCommunity,
  delCommunityById,
  updateCommunity,
} from "../../api/index";
import { ElMessage } from "element-plus";
const searchData = ref({
  page: 1,
  pageSize: 100,
  name: "",
});
const dialogFormVisible = ref(false);
const form = ref({
  ID: "",
  communityName: "",
  street: "",
  province: "",
  city: "",
  area: "",
});
const rules = ref({
  name: [
    { required: true, message: "请输入小区名称", trigger: "blur" },
  ],
  street: [{ required: true, message: "请输入详细地址", trigger: "blur" }],
});
const tableData = ref();
const total = ref(0);
const formRef = ref();

onMounted(() => {
  init();
});
const init = async () => {
  const res = await getCommunityByName(searchData.value).catch();
  tableData.value = res.data;
  total.value = res.data.length;
};

const search = async () => {
  init();
};
const reset = async () => {
  searchData.value.name = "";
  init();
};
const handleSizeChange = async (val) => {
  console.log(val);
  init();
};
const handleCurrentChange = async (val) => {
  console.log(val);
  init();
};

//删除
const deleteRow = async (ID) => {
  const res = await delCommunityById(ID);
  if (res.code == 200) {
    init();
    ElMessage({
      message: "操作成功",
      type: "success",
    });
    // if (tableData.value.length === 1) {
    //   if (searchData.value.page != 1) searchData.value.page--;
    //   init();
    // }
  }
};
//新增
const toAdd = async (ID) => {
  form.value.ID = "";
  dialogFormVisible.value = true;
};

//编辑
const editRow = async (row) => {
  form.value.ID = row.ID;
  form.value.communityName = row.communityName;
  form.value.street = row.street;
  form.value.province = row.province;
  form.value.city = row.city;
  form.value.area = row.area;
  dialogFormVisible.value = true;
};

const confirm = async () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      if (form.value.ID) {
        //修改
        const res = await updateCommunity(form.value);
        if (res.code == 200) {
          init();
          ElMessage({
            message: "操作成功",
            type: "success",
          });
          dialogFormVisible.value = false;
        }
      } else {
        //新增
        const { ID: _, ...rest } = form.value;
        const res = await addCommunity(rest);
        console.log(res);
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        dialogFormVisible.value = false;
        init();
      }
      formRef.value.resetFields();
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}
.search-line {
  display: flex;
  justify-content: space-between;
  padding: 10px 10px 0;
  .el-form-item {
    margin-bottom: 10px;
  }
}
.content {
  flex: 1;
  background-color: #fff;
  border-radius: 20px;
  padding: 10px;
  .table-title {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 20px;
    border-bottom: 1px solid black;
    padding: 0 10px 10px;
    margin-bottom: 10px;
  }
  .my-pagination {
    padding: 10px 0 0 10px;
  }
}
.my-pagination {
  padding: 10px 0 0 10px;
  display: flex;
  justify-content: center;
}
</style>
